<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    /*显示/隐藏的过渡效果*/
    .xxx-enter-active, .xxx-leave-active{
        transition: opacity 1s;
    }
    /*隐藏时的样式*/
    .xxx-enter, .xxx-leave-to{
        opacity: 0;
    }

    /*显示的过渡效果*/
    .move-enter-active{
        transition: all 1s;
    }
    /*隐藏的过渡效果*/
    .move-leave-active{
        transition: all 3s;
    }

    /*隐藏时的样式*/
    .move-enter, .move-leave-to{
        opacity: 0;
        transform: translateX(20px);
    }
</style>
<body>
<div id="test">
    <button @click="isShow=!isShow">toggle</button>
    <transition name="xxx">
        <p v-show="isShow">hello</p>
    </transition>
</div>

<div id="test2">
    <button @click="isShow=!isShow">toggle</button>
    <transition name="move">
        <p v-show="isShow">hello</p>
    </transition>
</div>
<script type="text/javascript" src="../js/vue.js"></script>
<script type="text/javascript">
    new Vue({
       el: "#test",
       data(){
           return {
               isShow: true
           }
       }
    });
    new Vue({
        el: "#test2",
        data(){
            return {
                isShow: true
            }
        }
    });
</script>
</body>
</html>